<template>
  <div>
    <template v-for="item in list">
      <ul :key="item.img">
         <li> <img v-lazy="item.img" alt=""> </li>
         <li> {{item.name}} </li>
      </ul>
    </template>
  </div>
</template>
<script>
import axios from 'axios'
// v-lazyload 使用两种形式： img
// img使用  v-lazy
// 背景图使用 v-lazy:background-image

/**
 *  动态组件：
 *
 *
 */
export default {
  // 1. 当前数据绑定在data函数中为了什么？objectdefineProperty 设置 getter setter

  /**
   *  vue2;
   *  1. observer: objectdefineProperty
   *  2. watcher:
   *  3. compiler:
   *
   *  vue3
   *  1. observer: proxy
   *  2. watcher:
   *  3. compiler
   */
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      const data = await axios.get('/data.json')
      this.list = data.data;
      console.log('this.list:....', this.list)
    }
  }
}
</script>